<template>
  <div class="reporthead">
    <div class="head-row">
      <span class="choice-title">所属企业：</span>
      <Cascader
          :value.sync="company_id_arr"
          :options.sync="options"
          :placeholder="'选择所属企业'"
          :width="'450px'"
          :changeEvent="'companyChange'"
          size="small"
        >
        </Cascader>
    </div>
    <div class="head-row" style="height: auto; min-height: 36px;">
      <span class="choice-title">时间：</span>
      <div class="datecheck">
        <span>日期选择：</span>
        <el-date-picker
          v-model="datetimeval.day"
          type="daterange"
          align="right"
          unlink-panels
          popper-class="report-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="dayChange"
        >
        </el-date-picker>
        <span style="margin-left: 30px;">时段选择：</span>
        <template>
          <el-time-picker
            is-range
            v-model="datetimeval.hm"
            value-format="HH:mm"
            format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            :disabled="isDisabledTims"
            @change="timeChange">
          </el-time-picker>
        </template>
        <el-select v-model="TimeFast" placeholder="快速选择" :disabled="isDisabledTims" @change="TimaFastChange" class="timefast">
          <el-option
            v-for="item in TimeFastList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="head-row site-row" >
      <!--案场名称-->
      <span class="choice-title">{{global.caseTitle}}选择：</span>
        <div class="site">
        <el-select v-model="case_id"  @change="CaseChange"   filterable
                    size="small"  placeholder="请选择位置" style="width:450px;">
          <el-option
            v-for="item in Case"
            :key="item.id"
            :label="item.case_name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="head-row" style="height: auto; min-height: 36px;">
      <span class="choice-title">对比时间：</span>
      <div class="datecheck">
        <span>日期选择：</span>
        <el-date-picker
          v-model="duibiDateTime"
          type="daterange"
          align="right"
          unlink-panels
          popper-class="report-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="duibiTimeChange"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="head-row site-row" v-if="isArea">
      <!--区域名称-->
      <span class="choice-title">{{global.areaTitle}}选择：</span>
      <div class="reheadselect">
        <el-select v-model="area_id"  @change="AreaChange"  filterable 
                    size="small"  placeholder="请选择区域" style="width:80%">
          <el-option
            v-for="item in area"
            :key="item.area_id"
            :label="item.area_name"
            :value="item.area_id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="head-row" style="height: auto; min-height: 36px;">
      <span class="choice-title">指标选择：</span>
      <div class="kpiradio">
        <el-radio-group v-model="kpiType" size="small" @change="kpiTypeChange" >
          <template v-for="item in kpislist" >
            <el-radio border  :key="item.key" v-if="item.type == 1" :label="item.key">{{item.name}}</el-radio>
          </template>
        </el-radio-group>
      </div>
    </div>
    <div class="head-row" style="height: auto; min-height: 36px;">
      <span class="choice-title">时间间隔：</span>
      <el-radio-group v-model="timeSizeCkeck" size="mini" @change="timeSizeChange">
        <el-radio-button  v-for="item in timeSizeList" :key="item.tag" :label="item.tag">{{item.name}}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="head-row ok">
      <el-button @click="Updata" class="queryReport" 
                 :type="dataIsChange ? 'primary':'success'" size="small">
        <span v-if="dataIsChange"><i class="el-icon-search"></i> 查询报表</span>
        <span v-else><i class="el-icon-refresh-left"></i> 刷新报表</span>
      </el-button>
    </div>
  </div>
</template>
<style lang="scss">
.reporthead {
  width: 100%;
  background: #fff;
  padding: 27px 0 20px 45px;
  .head-row {
    line-height: 36px;
    height: 36px;
    margin-bottom: 15px;
    .choice-title{
      display: inline-block;
      width: 85px;
      margin-right: 5px;
      text-align: left;
      vertical-align: top;
    }
    .block{
      color: #777;
      span{
        margin-right: 2px;
      }
    }
    span {
      font-size: 14px;
    }
    .datecheck {
      .el-input__inner {
        line-height: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 0;
        width: 250px;
        border-color: #e3eaf4;
        .el-input__icon {
          height: 36px;
          line-height: 36px;
          &.el-range__close-icon {
            display: none;
          }
        }
        .el-range-separator {
          height: 36px;
          line-height: 36px;
          padding: 0;
          width:6%;
        }
      }
      height: 36px;
      display: inline-block;
      .el-date-editor--date {
        .el-input__inner {
          border-radius: 0;
          border-color: #e3eaf4;
          height: 36px;
          line-height: 36px;
        }
        span,
        i {
          line-height: 36px;
        }
      }
      .timefast{
        width: 120px;
        .el-input__inner {
          padding: 0 20px;
          font-size: 14px;
          margin-left: -6px;
        }
      }
      .el-input--suffix {
        width: 120px;
        .el-input__inner {
          padding-right: 0;
          width: 120px;
          color:#545deb;
          background: #f2f5ff;
          border-color: #cad7ff
        }
        .el-input__inner::-webkit-input-placeholder{
          color: #545deb;
        }
        .el-input__prefix {
          .el-input__icon {
            line-height: 36px;
            height: 36px;
          }
        }
        .el-input__suffix {
          line-height: 45px;
          vertical-align: middle;
          .el-input__suffix-inner{
            .el-icon-arrow-up.is-reverse{
              margin-top: -2px;
              display: block;
            }
          }
        }
      }
    }
    &.site-row {
      margin-bottom: 3px;
      position: relative;
      height: auto;
      > span {
        vertical-align: top;
      }
      .xiala {
        position: absolute;
        right: 20px;
        width: 80px;
        height: 36px;
        .iconfont {
          position: absolute;
          height: 36px;
          line-height: 38px;
          right: 10px;
        }
        .el-checkbox {
          width: 80px;
          height: 36px;
          line-height: 36px;
          padding: 0 10px 0 0;
          color: #000;
          .el-checkbox__input {
            display: none;
          }
          .el-checkbox__label {
            line-height: 36px;
            color: #000;
            padding: 0;
          }
        }

        border-radius: 2px;

        top: 0;
        text-align: center;
      }
      .site,
      .reheadselect {
        display: inline-block;
        width: 60%;
        transition: all 0.5s;
        overflow: hidden;
         &.siteopen{
            overflow-y:auto;
            &::-webkit-scrollbar {/*滚动条整体样式*/
                width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
                height: 5px;
                border-radius: 5px;
                scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                border-radius: 5px;
                box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgba(0,0,0,0.2);
                scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgba(0,0,0,0.1);
                border-radius: 5px;
            }
          }
        /*.el-checkbox,.el-radio {*/
          /*width: 182px;*/
          /*margin: 0 10px 15px 0;*/
          /*padding: 0;*/
          /*height: 36px;*/
          /*line-height: 36px;*/
          /*padding: 0;*/
          /*border-radius: 2px;*/
          /*text-align: center;*/
          /*border-color: #e3eaf4;*/
          /*&.is-checked {*/
            /*border-color: #5580ff;*/
            /*background: #5580ff;*/
            /*.el-checkbox__label ,.el-radio__label{*/
              /*color: #fff;*/
            /*}*/
          /*}*/

          /*&:hover {*/
            /*border-color: #5580ff;*/
          /*}*/
          /*.el-checkbox__input,.el-radio__input {*/
            /*display: none;*/
          /*}*/
          /*.el-checkbox__label,.el-radio__label {*/
            /*padding-left: 0;*/
            /*color: #000;*/
          /*}*/
        /*}*/
      }
    }
    &.ok {
      height: auto;
      min-height: 36px;
      line-height: 36px;
      text-align: center;
      .el-radio-group{
        height: 36px;
        line-height: 36px;
        .el-radio-button__inner {
          height: 36px;
          line-height: 36px;
          padding: 0;
          width: 50px;
          font-size: 12px;
        }
      }
      .queryReport {
        line-height: 36px;
        height: 36px;
        padding: 0 10px;
        margin-right: 45px;
        vertical-align: middle;
        display: inline-block;
        // background-color: #8EC5FC;
        // background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); 
        // border-color: #8EC5FC;
        background:#6689f1;border-color:#6689f1;
        &.el-button--success{
            background: #85ce61;
            border-color: #85ce61;
        }
        span{
          color:#fff;
        }
      }
    }
    .kpiradio{
      display: inline-block;
      max-width: 85%;
      .el-radio-group{
        .el-radio{
          width: 85px;
          height:26px;
          text-align: center;
          background: #f2f5ff;
          color: #5f67ec;
          border: 1px solid #cad7ff;
          margin: 0 20px 5px 0px !important;
          padding: 0;
          line-height: 23px;
        }
        .is-checked{
          background: #545deb;
          border: 1px solid #545deb;
          .el-radio__label{
            color: #fff;
          }
        }
      }
      .el-radio__input{
        display: none;
      }
      .el-radio__label{
        display: inline;
        padding-left: 0px;
        color: #5f67ec;
      }
      }
  }
}

.report-date.el-picker-panel{
    left: 215px !important;
   .el-picker-panel__sidebar {
    right: 0;
    width: 180px;
    text-align: center;
    &::before {
      content: "快速选择";
      width: 90%;
      height: 32px;
      margin: 8px 0;
      display: inline-block;
      font-size: 14px;
      line-height: 32px;
      border-radius: 3px;
      color: #fff;
      background: #6689f1;
      text-align: center;
    }
    .el-picker-panel__shortcut {
      text-align: center;
      display: inline-block;
      background: #f3f3f3;
      padding: 0;
      width: 40%;
      margin: 5px;
      &:hover {
        background: #5580ff;
        color: #fff;
      }
    }
   }
   .el-picker-panel__body {
    margin: 0 180px 0 0;
  }
}

</style>
<script>
let moment = require("moment");
import Cascader from "@/components/sys/assembly/elcascader"; //级联选择器
import reportGlobal from "@/components/global/reportGlobal";//公共配置
let kpiName = reportGlobal.name;
export default {
  props: {
    option: {
      type: Object,
      default: function() {
        return {
        };
      }
    },
    isArea:{
      default:function(){
        return false        //是否是区域选择 默认不是
      }
    },
    global:{},       //公共参数

    code:'',
  },
  data() {
    return {
      pickerOptions: {                //时间日期控件规则
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;   //正常 今天之前
          //  let curDate = (new Date()).getTime();
          //   let three = 14 * 24 * 3600 * 1000;
          //   let threeMonths = curDate - three;
          //   return time.getTime() > Date.now() || time.getTime() < threeMonths;
        },
        shortcuts: [],
      },
      //正常日期控件快捷选择方式
      dayShortcuts:[
        {
          text: "今天",
          onClick(picker) {
            const start = moment().format("YYYY-MM-DD");
            const end = moment().format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "昨天",
          onClick(picker) {
            const start = moment()
            .subtract(1, "days")
            .format("YYYY-MM-DD");
            const end = moment()
            .subtract(1, "days")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "前天",
          onClick(picker) {
            const start = moment()
            .subtract(2, "days")
            .format("YYYY-MM-DD");
            const end = moment()
            .subtract(2, "days")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "上周同日",
          onClick(picker) {
            const start = moment()
            .subtract(1, "weeks")
            .format("YYYY-MM-DD");
            const end = moment()
            .subtract(1, "weeks")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "上月同日",
          onClick(picker) {
            const start = moment()
            .subtract(1, "months")
            .format("YYYY-MM-DD");
            const end = moment()
            .subtract(1, "months")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "本周",
          onClick(picker) {
            const weekOfday = moment().format("E"); //计算今天是这周第几天
            const start = moment()  
            .subtract(weekOfday - 1, "days")
            .format("YYYY-MM-DD");
            const end = moment().format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "上一周",
          onClick(picker) {
            const start = moment()
            .week(moment().week() - 1)
            .startOf("week")
            .subtract(-1, "days")
            .format("YYYY-MM-DD");
            const end = moment()
            .week(moment().week() - 1)
            .endOf("week")
            .subtract(-1, "days")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "本月",
          onClick(picker) {
            const start = moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
            const end = moment().format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "上一月",
          onClick(picker) {
            const start = moment()
            .month(moment().month() - 1)
            .startOf("month")
            .format("YYYY-MM-DD");
            const end = moment()
            .month(moment().month() - 1)
            .endOf("month")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "本年度",
          onClick(picker) {
            const start = moment()
            .year(moment().year())
            .startOf("year")
            .format("YYYY-MM-DD");
            const end = moment().format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
        {
          text: "上一年",
          onClick(picker) {
            const start = moment()
            .year(moment().year() - 1)
            .startOf("year")
            .format("YYYY-MM-DD");
            const end = moment()
            .year(moment().year() - 1)
            .endOf("year")
            .format("YYYY-MM-DD");
            picker.$emit("pick", [start, end]);
          }
        },
      ],
      TimeFast:'',          //时间快速选择
      TimeFastList:[         //时间快速选择列表
        { label:'最近30分钟',value:'min30' },
        { label:'最近1小时',value:'hour1' },
        { label:'最近2小时',value:'hour2' },
        { label:'全天',value:'today' },
      ],     
      company_id_arr:[],   //所属企业选中id
      company_id:'',  //所属企业选中id
      options:[],         //级联控件 所属企业

      Case:[],     //案场列表
      case_id:null,   //案场选中参数
      area:[],       //区域列表
      area_id:null,  //区域选中参数
      datetimeval:{
        day:[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],hm:['00:00','23:59']
      },
      duibiDateTime:[moment(new Date()).subtract(1, 'days').format("YYYY-MM-DD"),moment(new Date()).subtract(1, 'days').format("YYYY-MM-DD")],
      allAreaArr:[],//全选区域id数组
      kpislist:[],//指标数组列表
      kpiType:'', //选择的指标
      timeSizeList: [],
      timeSizeCkeck:'',
      isDisabledTims:false,
      dycTiemLoad:true,
      dataIsChange:true,
    };
  },
  components: {
    Cascader
  },
  created() {
    
  },
  mounted() {
    this.getReady();
    this.getTimeSize(this.datetimeval,this.duibiDateTime);
    this.pickerOptions.shortcuts =this.dayShortcuts;
    //所属企业change事件
    this.$Bus.$on('companyChange',data =>{
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      this.dataIsChange=true;
      this.company_id=data[data.length-1];
      this.getCase(data[data.length-1]);
    });
  },
  beforeDestroy(){
    this.$Bus.$off('companyChange');
  },
  methods: {
    //页面初始化,获取企业信息，拿到第一个企业调用获取案场
    getReady(){
      let url = '/sys/report_assist_new/company_tree';
      this.$api.get(url)
      .then(data => {
        if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
        }
        if(data){
          recursion(data.data);
          function recursion(val) {
            if(val.length){
              for(let i in val){
                val[i].value = val[i].id;
                val[i].label = val[i].company_name;
                val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                if(val[i].children && val[i].children.length){
                  recursion(val[i].children)
                }else{
                  delete val[i].children
                }
              }
            }
          }
          this.$nextTick(()=>{
            this.options = data.data;
            this.company_id = data.data[0].id;
            this.company_id_arr.push(data.data[0].id);
            this.$Bus.$emit('Loading',true);
            this.getCase(this.company_id);
          })
        }
      })
      .catch(err=>{
        console.log(err,'企业');
        this.options = [];
      })
    },
    //get案场列表api
    getCase(id,org_type=1){
      this.case_id = ''
      let parmas={
        org_id_list:Array.of(id),
        org_type:org_type
      };
      let url='/sys/report_assist_new/case_list?tags='+this.global.tags;
      this.$api.post(url,parmas)
      .then(data=>{
        if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
        }

        this.Case = [];
        if(data.data&&data.data.length){
          this.Case = data.data;
          this.case_id = data.data[0].id;
          if(this.isArea){
            this.getArea();
          }
          else{
            this.getKpis(data.data[0].id);
          }
        }
        else{
          this.$message.warning('该企业下无' + this.global.caseTitle);
          this.Case = [];
          this.area = [];
          this.kpislist=[];
          this.kpiType='';
          this.case_id = '';
          this.area_id='';
          this.$Bus.$emit('Loading',false);
        }
      })
      .catch(err=>{
         console.log(err)
        this.$message.warning('该企业下无' + this.global.caseTitle);
        this.case_id = '';
        this.Case = [];
        this.kpislist=[];
        this.kpiType='';
        this.area_id='';
      })
    },

    //区域列表()
    getArea(org_type=2){
      if(!this.case_id) {
        this.$message.warning('该企业下无'+ this.global.caseTitle +'!');
        this.$Bus.$emit('Remove');
        this.$Bus.$emit('Loading',false);
        this.area_id ='';
        this.area = [];
        return ;
      }
      //初始化设置区域多选
      let parmas={
        org_id_list:Array.of(this.case_id),
        org_type:org_type
      }
      let url='/sys/report_assist_new/find_area?tags='+ this.global.tags.join(',')
      this.$api.post(url,parmas)
      .then(data=>{
        this.area_id ='';
        this.area = [];
        if(data.data&&data.data.length){
          this.area = data.data.map(x=>{
            if(x.tags && x.tags.includes(-1)) {
              x.area_name = '[排除]'+ x.area_name
            }
            return x;
          })
          this.area_id=this.area[0].area_id;
          this.getKpis(this.area_id,3);
          this.$nextTick(()=>{
            this.changeBgColor()
          });
        }
        else{
          this.area_id ='';
          this.area = [];
          this.$Bus.$emit('Loading',false);
        }
      })
      .catch(err=>{
        this.$message.warning('该'+ this.global.caseTitle +'下无'+ this.global.areaTitle);
        this.area_id ='';
        this.area = [];
        this.$Bus.$emit('Loading',false);
      })
    },

    //条件改变
    Updata(){
      if(this.datetimeval.day[0]==this.duibiDateTime[0]){
        this.$message({
          showClose: true,
          message: '对比开始时间不能相同',
          type: 'warning'
        });
        this.$Bus.$emit('Remove');
        return 
      }
      else if(!this.case_id)
      {
        this.$message({
          showClose: true,
          message: '至少选择一个'+this.global.caseTitle,
          type: 'warning'
        });
        this.$Bus.$emit('Remove');
        return
      }
      else if(!this.kpiType){
        this.$message({
          showClose: true,
          message: '请选择指标类型',
          type: 'warning'
        });
        this.$Bus.$emit('Remove');
        return
      }
      else if(!this.timeSizeCkeck){
        if(!this.timeSizeList.length)
        {
          this.$message({
            showClose: true,
            message: '对比时间跨度不符合要求',
            type: 'warning'
          });
        }
        else{
          this.$message({
            showClose: true,
            message: '请选择时间间隔',
            type: 'warning'
          });
        }
        this.$Bus.$emit('Remove');
        return
      }
      else if(this.isArea&&(!this.area_id))
      {
        this.$message({
          showClose: true,
          message: '至少选择一个'+this.global.areaTitle,
          type: 'warning'
        });
        this.$Bus.$emit('Remove');
        return
      }

      this.$Bus.$emit('Loading', true);
      let submitdata={};
      let comp_name='';
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].id == this.company_id) {
          comp_name = this.options[i].label;
          break;
        }
      }
      submitdata.comp_name=comp_name;
      submitdata.daochu=this.isShowExport();
      submitdata.duibi_time=this.duibiDateTime;
      submitdata.time=this.datetimeval.day;
      submitdata.start_hm=this.datetimeval.hm[0];
      submitdata.end_hm=this.datetimeval.hm[1];
      submitdata.case_id=this.case_id;
      submitdata.area_id=this.area_id;
      submitdata.kpiType=this.kpiType;
      submitdata.timeSizeCkeck=this.timeSizeCkeck;
      this.dataIsChange=false;
      this.$Bus.$emit('UpCondition',submitdata);      //条件改变
    },

   
    //案场change事件
    CaseChange(val){
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      if(this.isArea)
      {
        this.getArea()
      }
      else{
        this.getKpis(val);
      }
      this.dataIsChange=true;
    },


    AreaChange(val) {
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      this.getKpis(this.area_id,3);
      this.dataIsChange=true;
      this.$nextTick(() => {
        this.changeBgColor();
      })
    },
    changeBgColor(){
      $('.el-select__tags').find('.el-select__tags-text').each(function (i) {
        if($(this).html().includes('[排除]')){
          // $(this).parent().css({background:'#f56c6c'})
          $(this).css({color:'#f56c6c'})
        }else{
          $(this).css({color:'#777'})
        }
      })
    },
    
    //日期change事件
    dayChange(val){
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      this.dataIsChange=true;
      this.getTimeSize(this.datetimeval,this.duibiDateTime);
    },
    //对比日期change事件
    duibiTimeChange(val){
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      this.dataIsChange=true;
      this.getTimeSize(this.datetimeval,val);
    },
    //时间change事件
    timeChange(val){
      if(val[0] == val[1]){
        this.$message.warning('起始时间不得等于终止时间')
        this.datetimeval.hm = ['00:00','23:59']
      }
      this.TimeFast='';
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      this.dataIsChange=true;
      this.getTimeSize(this.datetimeval,this.duibiDateTime);
    },
    
    //获取指标接口
    getKpis(id,org_type=2){
      let url='/sys/report_assist_new/get_indicator_list'
      let params = {
        org_id_list :Array.of(id),
        org_type : org_type,
      }
      this.$api.post(url,params)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          return
        }
        if(data){
          this.kpislist = data.data;
          this.kpislist.sort((x,y)=>{
            if(x.id < y.id){
              return -1
            }else{
              return 1
            }
          });
          let keysArr = this.kpislist.map(x=>{
            return x.key
          })
          this.kpiType = keysArr.includes(this.kpiType) ? this.kpiType :this.kpislist[0].key;
          this.$Bus.$emit('Loading',false);
        } else{
          this.kpislist=[];
          this.kpiType='';
          this.$Bus.$emit('Loading',false);
          this.$message.warning('该'+ this.global.caseTitle +'下无该报表指标');
        }
      })
      .catch(err=>{
        this.kpislist=[];
        this.kpiType='';
        this.$Bus.$emit('Loading',false);
      })

    },
    //时间粒度是否合法
    getTimeSize(date,pkDate){
      let p1=new Promise((resolve,reject)=>{
        let url='/sys/report_assist_new/get_interval_list?start_day='+date.day[0]+'&end_day='+date.day[1]+'&start_hm='+date.hm[0]+
        '&end_hm='+date.hm[1];
        this.$api.post(url)
        .then(data=>{
          if(data.data){
              resolve(data.data);
          }
        })
        .catch(err=>{
           console.log(err);
        })
      })
      let p2=new Promise((resolve,reject)=>{
        let url='/sys/report_assist_new/get_interval_list?start_day='+pkDate[0]+'&end_day='+pkDate[1]+'&start_hm='+date.hm[0]+
        '&end_hm='+date.hm[1];
        this.$api.post(url)
        .then(data=>{
          if(data.data){
              resolve(data.data);
          }
        })
        .catch(err=>{
           console.log(err);
        })
      })
      let p=Promise.all([p1,p2]);
      p.then(data=>{
       let arr=[...data[0]].filter(x=>[...data[1]].some(y=>y.tag==x.tag));
       if(arr.length)
       {
         this.timeSizeList=arr;
         this.timeSizeCkeck=arr[0].tag;
          let isDay = this.timeSizeList.filter(x=>{
              return x.type != 'DAY'
            })
         this.isDisabledTims = isDay.length == 0 ? true : false;
       }
       else{
        this.timeSizeList=[];
        this.timeSizeCkeck='';
       }
       this.$nextTick(()=>{
         if(this.dycTiemLoad)
         {
           this.dycTiemLoad=false;
         }
         else{
           this.$Bus.$emit('Loading', false);
         }
       })
      })
      .catch(err=>{
        this.timeSizeList=[];
        this.timeSizeCkeck='';
        this.$Bus.$emit('Loading', false);
         console.log(err);
      })
    },
    TimaFastChange(val){
      switch (val) {
        case "min30": {
          let str_hm = moment().subtract(30, 'minutes').format('HH:mm');
          let end_hm = moment().format('HH:mm');
          this.datetimeval.hm = [str_hm, end_hm];
          break;
        }
        case "hour1": {
          let str_hm = moment().subtract(1, 'hours').format('HH:mm');
          let end_hm = moment().format('HH:mm');
          this.datetimeval.hm = [str_hm, end_hm];
          break;
        }
        case "hour2": {
          let str_hm = moment().subtract(2, 'hours').format('HH:mm');
          let end_hm = moment().format('HH:mm');
          this.datetimeval.hm = [str_hm, end_hm];
          break;
        }
        case "today": {
          this.datetimeval.hm = ["00:00", "23:59"];
          break;
        }
      }
      this.$Bus.$emit('Loading',true);
      this.$Bus.$emit('Remove');
      this.dataIsChange=true;
      this.getTimeSize(this.datetimeval,this.duibiDateTime);
    },

    //指标改变
    kpiTypeChange(val){
      this.dataIsChange=true;
      this.$Bus.$emit('Remove');
    },
    //时间间隔改变
    timeSizeChange(val){
      this.dataIsChange=true;
      this.$Bus.$emit('Remove');
    },
    //判断是否开启导出按钮
    isShowExport(){
      for(let i in this.timeSizeList){
        if(this.timeSizeCkeck == this.timeSizeList[i].tag){
          return this.timeSizeList[i].type == 'MIN' ? false : true
        }
      }
    }
  },
  watch: {
    isDisabledTims(val){
      if(true){
        this.datetimeval.hm=["00:00","23:59"];
        this.TimeFast='today';
      }
    }
  }
};

</script>
